<script setup>
    import { onMounted, ref } from 'vue'
    import { getUserMes, handle_get_cards, confirm_message } from '@/api/member.js'
    // 记录搜索框内容
    const vUser = ref({
        name: '',
        id: '',
    })
    // 记录会员信息
    const options = ref([])

    // 定义一个响应式变量，用于存放会员卡信息
    const cards = ref([])

    
    // 
    const displayedName = ref('')


    // 表单数据模型
    const form = ref({
        name: '',
        sex: '',
        birthday: '',
        phone: '',
        note: ''
    });

    // 定义一个响应式变量，用于存放用户进行绑定的信息
    const selectedCard = ref({
        memberId: 0,
        cardId: 0,
        validCount: '', // 充值次数
        validDay: '', // 有效期(天数)
        receivedMoney: '', // 实收金额
        payMode: '', // 选择支付方式
        note: '' // 备注
    })

    // 获取会员信息
    const getUserMessage = () => {
        getUserMes().then(res => {
            options.value = res.data.data
        })
    }

    // 向后端查询会员卡信息
    const handleGetCards = () => {
        console.log('正在获取会员卡信息');
        handle_get_cards().then(res => {
            cards.value = res.data.data
        })
    }

    // 发送绑定信息到后端
    function confirm() {
        console.log(selectedCard.value);
        confirm_message(selectedCard.value).then(res => {
            if (res.data.code === 200) {
                ElMessage.success('绑定成功')
            } else {
                ElMessage.error('绑定失败')
            }
        })
    }

    // 支付方式
    const paymentMethods = ([
        { id: 1, name: '微信支付' },
        { id: 2, name: '支付宝' },
        { id: 3, name: '现金' },
        { id: 4, name: '银行卡' }
    ])

</script>

<template>
    <!-- 表单 -->
    <el-form label-width="120px" class="demo-ruleForm">
        <el-form-item label="会员">
            <el-select v-model="selectedCard.memberId" filterable placeholder="输入名字来搜索" @click="getUserMessage()">
                <template #header>
                    <el-container direction="vertical">
                        <el-row>
                            <el-col :span="8">
                                <el-text>会员姓名</el-text>
                            </el-col>
                            <el-col :span="8">
                                <el-text>性别</el-text>
                            </el-col>
                            <el-col :span="8">
                                <el-text>手机号</el-text>
                            </el-col>
                        </el-row>
                    </el-container>
                </template>
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                    <el-container direction="vertical">
                        <el-row>
                            <el-col :span="8">
                                <el-text>{{ item.name }}</el-text>
                            </el-col>
                            <el-col :span="8">
                                <el-text>{{ item.gender }}</el-text>
                            </el-col>
                            <el-col :span="8">
                                <el-text>{{ item.phone }}</el-text>
                            </el-col>
                        </el-row>
                    </el-container>
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="选择会员卡">
            <el-select v-model="selectedCard.cardId" placeholder="请选择会员卡" @click="handleGetCards()">
                <el-option v-for="(item, index) in cards" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="充值次数">
            <el-input v-model.number="selectedCard.validCount" placeholder="请输入充值次数"></el-input>
        </el-form-item>

        <el-form-item label="有效期">
            <el-input v-model.number="selectedCard.validDay" placeholder="请输入有效期(天数)"></el-input>
        </el-form-item>

        <el-form-item label="实收金额">
            <el-input v-model.number="selectedCard.receivedMoney" placeholder="请输入实收金额"></el-input>
        </el-form-item>

        <el-form-item label="选择支付方式">
            <el-select v-model="selectedCard.payMode" placeholder="请选择支付方式">
                <el-option v-for="(item, index) in paymentMethods" :key="index" :label="item.name"
                    :value="item.name"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="note">
            <el-input v-model="form.note" type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
            <el-button type="primary" @click="confirm">确认</el-button>
            <el-button @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped>
    .el-form {
        width: 1000px;
        margin-top: 100px;
        padding: 40px;
        padding-left: 0px;
        --el-text-color-regular: #909399;
    }
</style>